<template>
  <div style="display:block;">
    <el-dialog title="选择面试模板" :visible.sync="show" @close="closeWin">
      <div class="top-wrap">
        <div class="title">面试模板</div>
        <el-tag  v-for="item,index in mianshi_list" :key="item.muban_name" closable style="margin-left:6px;" @close="deleteJob(item.id)">
          <span  @click.stop="chooseMuban(index)" style="cursor:pointer">
            {{item.muban_name}}
          </span>
        </el-tag>
      </div>
      <el-form :rules="formRules" ref="dataNoticeForm" :model="bean" label-position="right" label-width="80px"
               style='width: 600px; margin:20px auto;'>
        <el-form-item label="面试时间" prop="mianshi_time">
          <el-date-picker style="width:520px" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                          v-model="bean.mianshi_time"
                          type="datetime"
                          placeholder="选择面试时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="面试地址" prop="mianshi_address">
          <el-input v-model="bean.mianshi_address" placeholder="输入面试地址"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="mianshi_tele">
          <el-input v-model="bean.mianshi_tele" placeholder="输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="乘车路线" prop="mianshi_route">
          <el-input v-model="bean.mianshi_route" placeholder="输入乘车路线" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="备注信息" prop="mianshi_remark">
          <el-input v-model="bean.mianshi_remark" placeholder="输入备注信息"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doSaveMuban">另存为模板</el-button>
        <el-button type="primary" @click="doSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import API from '@/api'
  import Http from '@/http'
  import Msg from '@/utils/msg'
  import _ from 'underscore'
  import Store from '@/store'

  export default {
    name: "cityPicker",
    data() {
      return {
        bean: {},
        company:Store.getters.user.company,
        formRules: {
          mianshi_time: [{required: true, message: '请选择面试时间', trigger: 'blur'}],
          mianshi_address: [{required: true, message: '请填写面试地址', trigger: 'blur'}],
          mianshi_tele: [{required: true, message: '请填写联系电话', trigger: 'blur'}],
          mianshi_route: [{required: true, message: '请填写乘车路线', trigger: 'blur'}],
        },
        mianshi_list:[],
        notice_id:'',
        show: true
      }
    },
    props: {
      ids: {
        type: String,
        default() {
          return ""
        }
      },
      mobiles: {
        type: String,
        default() {
          return ""
        }
      },
    },
    computed: {},
    created() {
      this.loadNotice()

    },
    methods: {
      closeWin() {
        this.$emit('noticeWinClose')
      },
      chooseMuban(index){
        this.bean = this.mianshi_list[index]
      },
      loadNotice(){
        Http.getModel(API.get_notice_cache, {tpl_type: 1}, false).then((json) => {
          this.dealing = false
          if (json.code == 0) {
            this.mianshi_list = JSON.parse(json.data.content)
            this.notice_id = json.data.id
          } else {
            Msg.error(json.msg)
          }
        })
      },
      doSaveMuban(){
        this.$refs['dataNoticeForm'].validate((valid) => {
          if (valid) {
            Msg.prompt("请补充模板名",(val)=>{
              var current_bean = {
                mianshi_time:this.bean.mianshi_time,
                mianshi_address:this.bean.mianshi_address,
                mianshi_tele:this.bean.mianshi_tele,
                mianshi_route:this.bean.mianshi_route,
                mianshi_remark:this.bean.mianshi_remark,
                muban_name:val
              }
              var mianshi_list = _.clone(this.mianshi_list);
              mianshi_list.unshift(current_bean)
              var params = {
                id:this.notice_id,
                tpl_type: 1,
                content:JSON.stringify(mianshi_list)
              }
              Http.getModel(API.save_notice_cache, params, false).then((json) => {
                this.dealing = false
                if (json.code == 0) {
                  Msg.success("保存成功！",()=>{
                    this.loadNotice()
                  })
                } else {
                  Msg.error(json.msg)
                }
              })
            })
          }
        })
      },
      doSubmit() {
        console.log("mobiles:",this.mobiles)
        this.$refs['dataNoticeForm'].validate((valid) => {
          if (valid) {
            var params = this.bean
            var content = "短信正文： "+ '您好,请准备参加公司面试，面试时间：' + params.mianshi_time + ',面试地址：' + params.mianshi_address + ',联系方式：'
              + params.mianshi_tele + ',乘车路线：' + params.mianshi_route
              + (params.mianshi_remark ? ("(" + params.mianshi_remark + ")。") : "。") + "(" + this.company.name + ")";
            Msg.alert(content,()=>{
              Http.getModel(API.send_notice, {content:content,mobiles:this.mobiles}, false).then((json) => {
                this.dealing = false
                if (json.code == 0) {
                  Msg.success("发送成功！",()=>{

                    Http.getModel(API.set_tijian_notice_flag, {ids: this.ids}, false).then((json) => {
                      if (json.code == 0) {
                        this.$emit('refreshList')
                        this.closeWin()
                      }
                    })
                  })
                } else {
                  Msg.error(json.msg)
                }
              })
            })
          }
        })
      }
    }
  };
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  .top-wrap{
    padding:10px 50px;
    .title{
      margin-bottom:10px;
      font-weight:bold;
      color:#666;
      font-size:16px;
    }
  }
 </style>

